<template>
  <w-cell
    :icon="item.pcMeIcon"
    :hover="false"
    class="w-image-fill"
    :operation-width="150"
    :title="item.name">
    <template slot="other">
      <w-text-cell
        :detail="item.timeIntervalStr"
        title="时间:"/>
      <w-text-cell
        :detail="item.obligation"
        title="职责:"/>
      <w-text-cell
        :detail="item.url"
        title="网站:"/>
      <w-text-cell
        :detail="item.detail"
        title="简介:"/>
      <w-pop
        ref="POP"
        @reload="reload"/>
    </template>
    <template>
      <el-button
        type="info"
        class="w-float-right header-btn"
        size="mini"
        @click="editBtnClick">
        <i class="el-icon-edit-outline"/>
      </el-button>
      <span class="w-float-right">&nbsp;&nbsp;</span>
      <el-button
        type="danger"
        class="w-float-right header-btn"
        size="mini"
        @click="removeBtnClick">
        <i class="el-icon-delete"/>
      </el-button>
      <span class="w-float-right">&nbsp;&nbsp;</span>
      <el-popover
        trigger="hover"
        placement="top">
        <img
          :src="item.icon | imageLfit(200)"
          alt="">
        <div
          slot="reference"
          class="w-float-right">
          <el-tag size="medium">图片</el-tag>
        </div>
      </el-popover>
    </template>
  </w-cell>
</template>

<script>
  import WTextCell from '@/components/pc/textCell/index'
  import WPop from './pop'
  import WCell from '@/components/pc/Cell/cell_02/index'

  export default {
    name: 'AdminWebExperience',
    components: {
      WTextCell,
      WPop,
      WCell
    },
    props: {
      item: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    methods: {
      /**
       * 删除按钮点击
       */
      removeBtnClick() {
        this.item.dustbin_push ('name').w_then (() => {
          this.$emit ('reload')
        })
      },
      /**
       * 编辑按钮点击
       */
      editBtnClick() {
        this.$refs['POP'].show (this.item)
      },
      /**
       * reload
       */
      reload() {
        this.$emit ('reload')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .admin-web-experience {
    margin-bottom: 20px;

    > .header {

    }
  }
</style>
